<template>
  <div>
    <div
      v-if="storageUrl === true"
      :style="{ width: windowWidth + 'px', height: screenHeight + 'px' }"
      class="flex"
    >
      <div class="h-100">
        <Left :Eins="Eins"></Left>
      </div>
      <div :style="{ width: windowWidth - leftHide + 'px' }" class="h-100">
        <Head :headTitel="headTitel" @isShow="isShow"></Head>
        <div :style="{ height: screenHeight - 50 + 'px' }" class="w-100">
          <router-view :windowWidth="windowWidth"></router-view>
        </div>
      </div>
    </div>
    <div v-else>
      <Index></Index>
    </div>
  </div>
</template>
<script>
import Left from "@/components/left/left.vue";
import Head from "@/components/onTheHead/head.vue";
import Index from "@/components/index.vue";

export default {
  components: {
    Left,
    Head,
    Index,
  },
  data() {
    return {
      storageUrl: "",
      screenHeight: 0,
      windowWidth: 0,
      headTitel: null,
      leftHide: 0,
      Eins: false,
    };
  },
  created() {
    this.updateWindowWidth();
    window.addEventListener("resize", this.updateWindowWidth);
  },
  destroyed() {
    window.removeEventListener("resize", this.updateWindowWidth);
  },
  methods: {
    updateWindowWidth() {
      this.windowWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    },
    isShow(e) {
      this.Eins = e;
      e ? (this.leftHide = 65) : (this.leftHide = 200);
    },
  },
  mounted() {
    //获取路由
    let url = sessionStorage.getItem("myKey");
    let usaeNmaeUrl = JSON.parse(url);
    this.headTitel = usaeNmaeUrl;
    this.headTitel ? (this.storageUrl = usaeNmaeUrl.meta.requiresAuth) : "";
  },
  watch: {
    $route(to) {
      //储存路由
      sessionStorage.setItem("myKey", JSON.stringify(to));
      //获取路由
      let nameUrl = sessionStorage.getItem("myKey");
      let usaeNmaeUrl = JSON.parse(nameUrl);
      this.headTitel = usaeNmaeUrl;
      this.storageUrl = usaeNmaeUrl.meta.requiresAuth;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

body,
html {
  margin: 0;
  padding: 0;
}
</style>
